<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=no">
    <title>日新网</title>
    <link rel="stylesheet" href="__TMPL__Public/assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="__TMPL__Public/assets/css/reset.css">
    <link rel="stylesheet" href="__TMPL__Public/assets/css/style.css">
    <script type="text/javascript" src="__TMPL__Public/assets/js/rem.js"></script>
    <style>
        html,body,.register_yd{
            height: 100%;
            width: 100%;
            padding: 0;
            overflow: hidden;
        }

        .register_yd {
            position: relative;
            background: url("{:sp_get_asset_upload_path('http://video.rixins.com/image/default/CCABCCCF0C5B4A209E7786133C81AC14-6-2.png')}") no-repeat center;
            -webkit-background-size: 100% 100%;
            background-size: 100% 100%;
            /*background-attachment:fixed;*/
            /*background-position:  0 20px;*/
            overflow: hidden;
            /*min-height: 731px;*/
        }
        .register_yd .main {
            width: 300px;
            height: 310px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -160px 0 0 -150px;
        }
        .main .path {
            font-size: 14px;
            color: #000232;
        }
        .main .path span{
            float: left;
            width:50%;
            text-align: center;
            height: 40px;
            line-height: 40px;
            letter-spacing: 1px;
            font-weight: bold;
        }
        .path .register_yd  {
            opacity: .58;
        }
        .main .control-group{
            width: 100%;
            box-sizing: border-box;
            height: 40px;
            margin-bottom: 15px;
        }
        .main .control-group .yzm {
            width: 100%;
            height: 100%;
            position: relative;
        }
        .main .control-group .yzm .tp {
            position: absolute;
            top: 0 ;
            right: 0;
            height: 100%;
        }
        .control-group .yzm .tp img {
            height: 100%;
            width: 100%;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        .main .control-group input{
            width: 100%;
            height: 100%;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            background-color: rgba(0,0,0,.3);
            border: none;
            font-size: 16px;
            padding: 5px;
            color: rgba(255,255,255,.7);


        }
        .main .control-group input:-ms-input-placeholder,
        .main .control-group input:-webkit-placeholder{
            color: #f00;
        }
        .control-group .yzm .sms_code_but {
            width: 100px;
            height:41px;
            background-color:rgba(255,255,255,.7);
            position: absolute;
            top: -14px;
            right: 0;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
            line-height:40px ;
            text-align: center;
            letter-spacing: 1px;
            font-size: 14px;
        }
        .main .control-group .btn-primary {
            width: 300px;
            height: 50px;
            border-radius: 10px;
            line-height: 38px;
            text-align: center;
            letter-spacing: 2px;
            font-size: 18px;
            border: none;
            /*font-weight: bold;*/
            background-color: #c8161d;
        }
        :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color:rgba(255,255,255,.5);
        }
        ::-moz-placeholder { /* Mozilla Firefox 19+ */
            color: rgba(255,255,255,.5);
        }
        input:-ms-input-placeholder {
            color: rgba(255,255,255,.5);
        }
        input::-webkit-input-placeholder{
            color:rgba(255,255,255,.5);
        }
    </style>
</head>
<body>

<div class="register_yd">
    <div class="main">
        <form class="form-horizontal js-ajax-form" action="{:U('user/register/doregister')}" method="post">
            <div class="path clearfix">
                <span><a href="/index.php?g=user&m=login&a=index" class="path_active">账号登录</a></span>
                <span >  新用户注册</span>
            </div>
            <div class="control-group">
                <input type="number" name="mobile" placeholder="手机号" class="span4 input_username">
            </div>

            <div class="control-group">
                <input type="password" name="password" placeholder="密码" class="span4 input_password">
            </div>

            <div class="control-group">
                <input type="password" name="repassword" placeholder="重复密码" class="span4 input_password">
            </div>
            <div class="control-group">
                <div class="yzm">
                    <input type="text" class="span4 yzm_ipt" name="verify" placeholder="验证码">
                    <span class="tp"> {:sp_verifycode_img('length=4&font_size=14&width=100&height=34&charset=1234567890&use_noise=1&use_curve=0')}</span>
                </div>
            </div>

            <div class="control-group">
                <di class="yzm yzm2" >
                    <input type="text" class="yzm_ipt sms_code" name="sms_code" placeholder="手机验证码" >
                    <span class="sms_code_but">点击获取</span>
                </di>
            </div>

            <div class="control-group">
                <button class="btn btn-primary js-ajax-submit span4" type="submit" data-wait="1500" style="">
                    完成并登录
                </button>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript" src="__TMPL__Public/assets/js/jquery.1.12.4.js"></script>
<script src="__TMPL__Public/assets/js/bootstrap.min.js" ></script>
<script type="text/javascript" src="__PUBLIC__/js/layer/layer_1.js"></script>
<script>
    var sending = false;
    var timer   = 0;
    var sec     = 0;
    $('.sms_code_but').click(function () {
        if (!sending) {

            var _this   = $(this);
            var phone   = $("input[name='mobile']").val();

            if (!isPhoneAvailable(phone)) {
                layer.msg("请输入正确的手机号");
                return;
            }

            if ($("input[name='verify']").length > 0) {
                var verify  = $("input[name='verify']").val();
                if (!verify) {
                    layer.msg("请输入验证码");
                    return;
                }
            }
            console.log(1);
            $.post("{:U('User/Public/send_aliyun_sms')}", {phone : phone, verify : verify}, function (re) {
                if (re.status) {  console.log(2);
                    layer.msg(re.info);
                    sending = true;
                    sec     = 60;
                    timer   = setInterval('change_sms_but()', 1000);
                    change_sms_but();

                } else {
                    layer.msg(re.info);
                }
            })
        }
    });

    function change_sms_but() {
        var but = $('.sms_code_but');
        if (sec == 1) {
            but.html("点击获取");
            clearInterval(timer);
            sending = false;
            sec     = 60;
        } else {
            sec--;
            but.html(sec + 's后获取');
        }
    }

    function isPhoneAvailable(str) {
        var myreg = /^[1][3,4,5,6,7,8][0-9]{9}$/;
        if (!myreg.test(str)) {
            return false;
        } else {
            return true;
        }
    }
</script>
</body>
</html>